<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>${_front_title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/front/fonts/iconfont.css">
    <link rel="stylesheet" href="/static/front/css/base_new.css">
    <link rel="stylesheet" href="/static/front/css/library.css">
    <link rel="stylesheet" href="/static/front/css/style.css">
    <script src="/static/front/js/jquery-1.11.1.min.js"></script>
    <script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
    
    <style type="text/css">
       .investment .quick_screen{display:inline;}
       .investment .quick_screen:after{display:block;content:'';overflow:hidden;width:0;height:0;celar:both;}
       .investment .quick_screen span{margin-top:8px;margin-left:25px;}
       .investment .screen ul li{float:left;margin:8px;}
       .investment .screen ul li a{display:inline;padding:3px 5px;}
       .investment .screen ul li a.current{background:#5dc0d2;color:#fff;}
       .investment .screen ul li a:hover{background:#5dc0d2;color:#fff;}
       .Tab .Tab-shuaixuan{float:right;margin-top:-40px;cursor:pointer;width: 78px;height: 25px;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
    	-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:25px;}
   		.investment .quick_sxtj{margin-left:20px;}
   		.investment .quick_sxtj ul.clearfix li{font-size:12px;}
   		.investment .quick_sxtj ul.clearfix li input{border:1px solid #ccc;height:25px;}
   		.investment .quick_sxtj ul.clearfix li .quick_btn{width:50px;height:27px;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;-webkit-border-radius: 3px;
   		-moz-border-radius: 3px;-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:26px;cursor:pointer;margin-left:20px;}
      </style>

</head>

<body>
    <div class="content">
    <#include "../base/top.ftl" />
    <div id="myInvestmentMain" class="cnt clearfix layoutMain">
       <#include "base1.ftl" />
     
        <div class="investment fr" style="width:81.5%">
            <h2>我的投资</h2>
            <div class="Tab" style="margin-top: 48px;">
                <span data="pay" id＝"pay" class="TabOne tableTab <#if status?? && status=='pay'>active</#if>">回收中的投资</span>
                <span data="complete" id＝"complete" class="TabTwo tableTab <#if status?? && status=='complete'>active</#if>">回收完的投资</span>
                <span data="borrow" id＝"borrow" class="TabThree tableTab <#if status?? && status=='borrow'>active</#if>">投标中的投资</span>
                <span class='Tab-shuaixuan'>快速筛选</span>
                <div class="screen" style="border-top:1px dashed #ccc;width:100%;height:0px;overflow:hidden;box-sizing: border-box;">
                	<div class="quick_screen" style="width:100%;height:45px">
                		<span class='fl'>筛选时间段：</span>
                		<ul class='fl'>
						    <li id="-1"><a  <#if timePeriod?exists && timePeriod=="-1">class="current"</#if> href="javascript:void(0)">全部</a></li>
						    <li id="1"><a href="javascript:void(0)"<#if timePeriod?exists && timePeriod=="1">class="current"</#if>>今天</a></li>
						    <li id="2"><a href="javascript:void(0)" <#if timePeriod?exists && timePeriod=="2">class="current"</#if>>最近1周</a></li>
						    <li id="3"><a href="javascript:void(0)" <#if timePeriod?exists && timePeriod=="3">class="current"</#if>>最近1个月</a></li>
						    <li id="4"><a href="javascript:void(0)" <#if timePeriod?exists && timePeriod=="4">class="current"</#if>>最近3个月</a></li>
						    <li id="5"><a href="javascript:void(0)" <#if timePeriod?exists && timePeriod=="5">class="current"</#if>>最近6个月</a></li>
						</ul>
                	</div>
                	<div class='quick_sxtj'>
                		<ul class="clearfix">
                            <li>
                                <input type="text" id="publishTimeBegin1" style="width:130px;line-height:25px;display:inline-block;text-align:center;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" placeholder="请选择开始时间" value="<#if publishTimeBegin?exists>${publishTimeBegin}</#if>">&nbsp;&nbsp; 到&nbsp;&nbsp;
                                <input type="text" id="publishTimeEnd1" style="width:130px;line-height:25px;display:inline-block;text-align:center;" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" value="" placeholder="请选择结束时间" value="<#if publishTimeEnd?exists>${publishTimeEnd}</#if>">
                            </li>
                            <li>
                                <input type="button" class='quick_btn' value="搜 索" id="search">
                            </li>
                        </ul>
                	</div>
                </div>
                <script>
	             	var h = $('.screen').height();
	             	if(h==0){
	             		$('.screen').css('border','none')
	             	};
	              	$('.Tab-shuaixuan').click(function(){
	              		var h = $('.screen').height();
	              		if(h==0){
	              			$('.screen').css({
	              				'borderTop':'1px dashed #ccc',
	              			}).animate({
	              				height:90
	              			});
	              		}else{
	              			$('.screen').animate({
	              				height:0
	              			},function(){
	              				$('.screen').css('borderTop','none');
	              			});
	              		};
	              	});
	              	<#if (publishTimeBegin?exists && publishTimeBegin != '') || (publishTimeEnd?exists && publishTimeEnd != '') || (status?exists && status != '') || (timePeriod?exists && timePeriod != '-1')>
	              		$(".Tab-shuaixuan").click();
	              	</#if>
	             </script>
              
                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" style='margin-top: 0px;display:block;'>
                    <tbody style="display:block;">
	                    <tr class="clearfix">
	                        <th class="one" style="text-align:center;float:left;width:280px;">借款标 ｜ 投标时间</th>
	                        <th class="two" style="text-align:center;float:left;width:247px;">借款者 ｜ 协议书</th>
	                        <th class="three" style="text-align:center;float:left;width:150px;">年利率 ｜ 期限</th>
	                        <th class="four" style="text-align:center;float:left;width:150px;">投资金额</th>
	                        <#if status?? && status=='complete'>
	                        	<th class="five" style="text-align:center;float:left;width:150px;">已收本息</th>
	                        <#elseif status?? && status=='borrow'>
	                        	<th class="five" style="text-align:center;float:left;width:150px;">状态</th>	
	                        <#else>
	                        	<th class="five" style="text-align:center;float:left;width:150px;">待收本息</th>
	                        </#if>
	                    </tr>
                   		<#if (pageInfo??) & (pageInfo.pageList?size>0)>
                  			<#list pageInfo.pageList as model>
			                    <tr class="clearfix" style="display:table;height:55px;">			                    	
			                        <td class="one clearfix"  style="float:left;cursor:pointer;height:55px;width:280px;padding:0;" tender_id=<#if model.borrowId?exists>${model.borrowId}</#if>>
			                            <p class=" icon">
   	                                        <#if model.productId?exists && model.productId==3>
			                            		E
			                            	<#elseif model.productId?exists && model.productId==4>
			                            		车
			                            	<#elseif model.productId?exists && model.productId==5>
			                            		房 
			                            	<#elseif model.productId?exists && model.productId==6>
			                            		商
			                            	<#elseif model.productId?exists && model.productId==7>
			                            		押
			                            	<#elseif model.productId?exists && model.productId==8>
			                            		担
			                            	<#elseif model.productId?exists && model.productId==10>
			                            		贷
			                            	</#if>
			                            </p>
			                            <div class="fr text" style="margin-top:15px;">
			                                <#if model.title?exists>${model.title}</#if></br>
			                                <span><#if model.tenderTime?exists>${model.tenderTime?string("yyyy-MM-dd")}</#if></span>
	                                	　　 <i><#if model.tenderTime?exists>${model.tenderTime?string("HH:mm:ss")}</#if></i>
			                            </div>
			                        </td>
			                        <td class="two" style="float:left;width:247px;height:55px;">
			                            <i class="fl"><#if model.loanName?exists>${model.loanName}</#if></i>
			                            <u class="fr"><a href="/loan?borrowId=${model.borrowId}" target="_blank">借款协议</a></u>
			                        </td>
			                        <td class="three" style="float:left;width:150px;height:55px;">
				                        <i class="fl"><#if model.percent?exists>${model.percent}%</#if></i>
				                        <u class="fr">
					                        <#if (model.dateUtil?exists) && (model.dateUtil == "MONTH")>
	                      						<#if model.deadline?exists>${model.deadline}个月</#if>
	                      					<#elseif (model.dateUtil?exists) && (model.dateUtil == "DAY")>
	                      						<#if model.deadline?exists>${model.deadline}天</#if>
	                      					</#if>
				                        </u>
			                        </td>
			                        <td class="four" style="float:left;width:150px;height:55px;">
			                        	￥ <i><#if model.tenderMoney?exists>${model.tenderMoney?string(',##0.00')}</#if></i>
		                        	</td>
			                        <td class="five" style="float:left;width:150px;height:55px;">
			                        	<i><#if model.recoverAll?exists>￥ ${model.recoverAll?string(',##0.00')}<#else>投标中</#if></i>
			                        </td>			                       
			                    </tr>
	                    	</#list>
                    	<#else>
			                	<tr style='display:block;'><td rowspan="6" style="display: block;width:100%;height:30px;">暂无数据</td></tr>
              			</#if>
                	</tbody>
                </table>
            </div>
            <!-- 分页组件 -->
           <#if (pageInfo??) & (pageInfo.pageList?size>0)>
            	<div class="tcdPageCode"></div>
            </#if>
        </div>
    </div>
    
    <div id="footer">
      <div class="content">      
		<#include "../base/foot.ftl" />
      </div>
    </div>
      
    </div>
	<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
	<script type="text/javascript" src="${_front_js}/tabs.js"></script>
	<script type="text/javascript" src="${_front_js}/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${_front_js}/date.js"></script>
	<script type="text/javascript" src="${_front_js}/pagination/jquery.pagination.js"></script>
	<script>
	$(".tcdPageCode").createPage({
        pageCount:${pageInfo.pages},//总页数
        current:${pageInfo.index},
        backFn:function(index){
            window.location.href="/account/invest?index="+index+"&status=${status}";
        }
 	});
 	
 	$(".TabOne").click(function(){
 		var temp = $(this).attr("data");
 		window.location="/account/invest?status="+temp;
 	})
 	$(".TabTwo").click(function(){
 		var temp = $(this).attr("data");
 		window.location="/account/invest?status="+temp;
 	})
 	$(".TabThree").click(function(){
 		var temp = $(this).attr("data");
 		window.location="/account/invest?status="+temp;
 	})
 	
 	$(".quick_screen ul li").click(function(){
		$(".current").removeClass("current");
		$(this).addClass("current");
		var id = $(this).attr("id");
		window.location="/account/invest?timePeriod="+id+"&status=${status}";
		
	});
	
	$("#search").click(function(){
		var publishTimeBegin = $("#publishTimeBegin1").val();
		var publishTimeEnd = $("#publishTimeEnd1").val();
		window.location="/account/invest?timePeriod=${timePeriod}&publishTimeBegin="+publishTimeBegin+"&publishTimeEnd="+publishTimeEnd+"&status=${status}";
	})
   	$(".tabLibrary td").click(function(){
   	     var id=$(this).attr("tender_id");
   	     if(typeof(id)!="undefined"){
		  window.location="/invest/detail?id="+id;
   	    }
	})
	</script>
</body>

</html>
